<script>
  import TreeSelect from "@/components/common/tree-select";

  export default {
    name: 'annex-group-dialog',
    components: {
      TreeSelect
    },
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: undefined,
        // 操作类型[true-修改 false-添加]
        optType: false,
        // 附件动态配置分组表单对象
        annexGroupForm: {
          // 主键
          id: undefined,
          // 父级主键
          parentId: undefined,
          // 名称
          name: '',
          // 排序等级
          sort: undefined
        },
        // 附件动态配置分组表单校验规则对象
        annexGroupFormRules: {
          parentId: [
            { required: true, message: '父级分组不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '名称不能为空', trigger: 'blur' }
          ]
        },
        // 附件动态配置分组列表
        annexGroupList: [],
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false
      }
    },
    methods: {
      /**
       * 打开弹出框方法
       * @param {Object} annexGroup     附件动态配置分组对象
       * @param {Array}  annexGroupList 附件动态配置分组列表
       */
      openDialog(annexGroup, annexGroupList) {
        const isSave = annexGroup == null;

        this.visible = true;
        this.optType = !isSave;
        this.title = isSave ? '添加附件动态配置分组' : '修改附件动态配置分组';

        const annexGroupForm = this.annexGroupForm;
        if (!isSave) {
          for (let propKey in annexGroupForm) {
            if (annexGroup.hasOwnProperty(propKey)) {
              annexGroupForm[propKey] = annexGroup[propKey];
            }
          }
        }
        this.annexGroupList.push({
          id: "0",
          name: "顶级分组",
          children: JSON.parse(JSON.stringify(annexGroupList))
        });
      },
      /**
       * 分组树选择项发生改变事件
       * @param {Object} node 菜单选择树选中节点
       */
      changeGroupParentHandle(node) {
        const annexGroupForm = this.annexGroupForm;
        annexGroupForm.parentId = node.id;

        let children = node.children;
        let max = 0;
        if (children) {
          children.forEach(group => {
            max = Math.max(group.sort, max);
          });
        }
        annexGroupForm.sort = max + 1;

        // 清空校验
        this.$refs.annexGroupForm.clearValidate(['parentId'])
      },
      /**
       * 提交事件
       */
      submitHandle() {
        if (this.optType) {
          this.updateHandle();
        } else {
          this.saveHandle();
        }
      },
      /**
       * 保存事件
       */
      saveHandle() {
        this.buttonLoad = true;
        this.$refs.annexGroupForm.validate()
          .then(() => {
            return this.$axios.$get('/primary/get/one');
          })
          .then(({ data }) => {
            const annexGroupForm = this.annexGroupForm;
            annexGroupForm.id = data;
            // 向上传递事件
            this.$emit('save', JSON.parse(JSON.stringify(annexGroupForm)));

            this.notify('success', '操作成功', '添加附件动态配置分组成功');

            this.closeDialog();
          })
          .catch(() => {})
          .finally(() => {
            this.buttonLoad = false;
          });
      },
      /**
       * 修改事件
       */
      updateHandle() {
        this.buttonLoad = true;
        this.$refs.annexGroupForm.validate()
          .then(() => {
            const annexGroupForm = this.annexGroupForm;

            // 向上传递事件
            this.$emit('update', JSON.parse(JSON.stringify(annexGroupForm)));

            this.notify('success', '操作成功', '修改附件动态配置分组成功');

            this.closeDialog();
          })
          .catch(() => {})
          .finally(() => {
            this.buttonLoad = false;
          });
      },
      /**
       * 关闭弹出框方法
       */
      closeDialog() {
        // 重置附件动态配置分组表单对象
        this.$refs.annexGroupForm.resetFields();
        this.annexGroupForm.id = undefined;
        this.annexGroupForm.sort = undefined;

        this.annexGroupList = [];

        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
        });
      }
    }
  }
</script>

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="45%"
    top="10vh"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    class="annex-group-dialog"
  >
    <el-form size="small" :model="annexGroupForm" :rules="annexGroupFormRules" status-icon label-width="100px"
             @keyup.enter.native="submitHandle" ref="annexGroupForm">
      <el-form-item label="父级" prop="parentId">
        <tree-select :data-obj="annexGroupForm" prop-key="parentId" node-key="id" :tree-data="annexGroupList"
                     class-name="width90percent"
                     @node-click="changeGroupParentHandle" />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="annexGroupForm.name"
                  clearable
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入名称"
                  class="width90percent">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveHandle">添 加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateHandle">修 改</el-button>
    </span>
  </el-dialog>
</template>

<style scoped>
  .annex-group-dialog >>> .width90percent {
    width: 90%;
  }
</style>
